<template>
<div class="all">
  <header>
    <div class="div">
      <img src="../../assets/fff返回.png" @click="back()" alt="">
      <span class="solid" @click="back()">返回</span>
    </div>
    <div class="div">
      <span>个人工作站</span>
    </div>
    <div class="div">
<!--      <span @click="updateTeam" v-show="DocInfo.USER_ID == userid">编辑团队</span>-->
    </div>
  </header>
  <div class="all1">
    <div class="boxInfo">
      <ul class="DocInfoUL">
        <li class="InfoLeft">
          <img v-if="DocInfo.PHOTO"
               :src="DocInfo.PHOTO" class="photo" alt="">
          <img v-else src="../../assets/男医生@2x.png" class="photo" alt="">
        </li>
        <li class="InfoRight">
          <p class="fontSize15" style="font-weight: bold">{{DocInfo.NICK_NAME}}</p>
<!--          <p class="fontSize13">{{DocInfo.NICK_NAME}} <button class="tagTuandui">团队长</button></p>-->
          <p class="fontSize13">
            <a >{{DocInfo.MAJOR}}</a>
            <a >|</a>
            <a >{{DocInfo.DEPART}}</a>
          </p>
          <p class="hospital">
            {{DocInfo.HOSPITAL_NAME}}
            <span class="biaoqian" style="color: #FFFFFF!important;">{{DocInfo.GRADE}}</span>
          </p>
        </li>
        <li class="DocInfoRight" @click="runCode()">
          <img src="../../assets/二维码.png" alt="">
          <!--            <span>扫一扫</span>-->
          <!--            <span>{{DocInfo.team_name}}二维码</span>-->
        </li>
      </ul>
      <div class="divMenu" style=" border-radius: 10px 10px 0 0;
  margin-top: 10px;">
        <ul >
          <li>{{DocInfo.patcount ? DocInfo.patcount + '个' : '暂无'}}</li>
          <li>管理患者</li>
        </ul>
        <ul >
          <li>{{DocInfo.amountcount ? DocInfo.amountcount + '项' : '暂无'}}</li>
          <li>提供服务</li>
        </ul>
        <ul>
          <li>{{DocInfo.jiezhenCount ? DocInfo.jiezhenCount  : '暂无'}}</li>
          <li>接诊率
          </li>
        </ul>
      </div>
      <div class="divMenu">
        <ul >
          <li>{{DocInfo.haopingLv ? DocInfo.haopingLv  : '暂无'}}</li>
          <li>好评率
          </li>
        </ul>
        <ul >
          <li>{{DocInfo.zixunCount ? DocInfo.zixunCount : '暂无'}}</li>
          <li>咨询量
          </li>
        </ul>
      </div>
    </div>
    <div class="goodDivAll">
      <div class="goodDiv">
        <img src="../../assets/图文擅长.png" class="tuwenImg" alt="">
        <span class="goodText">
              <a >擅长：</a>
              <a >{{DocInfo.Goodat}}</a>
            </span>
      </div>
    </div>
  </div>
  <van-collapse v-model="activeNames" accordion>
    <van-collapse-item style='margin-top:5px'  name="1">
      <template #title>
        <div class="title_all">
          <a class="hengGang"></a>
          <strong>业务处理</strong>
        </div>
      </template>
      <div class="CommonFunctions">
        <div  v-for="(item, index) in BusinessProcessing" :key="index"
              @click="clickUse(item)"
              v-show="item.MENU_URL !== '#'"
        >
          <img :src="item.MENU_URL == '#' ?
           item.MENU_DOC_ICON_UNABLE : item.MENU_DOC_ICON" alt="">
          <span>{{item.MENU_NAME}}</span>
        </div>
      </div>
    </van-collapse-item>
    <van-collapse-item style='margin-top:5px'  name="2">
      <template #title>
        <div class="title_all">
          <a class="hengGang"></a>
          <strong>我的管理</strong>
        </div>
      </template>
      <div class="CommonFunctions">
        <div  v-for="(item, index) in MyManagement" :key="index"
              @click="clickMyUse(item)"
        >
          <img :src="item.MENU_URL == '#' ?
           item.MENU_DOC_ICON_UNABLE : item.MENU_DOC_ICON" alt="">
          <span>{{item.MENU_NAME}}</span>
        </div>
      </div>
    </van-collapse-item>
  </van-collapse>
</div>
</template>

<script>
import {Toast} from 'vant'

export default {
  name: 'DoctorHome',
  data () {
    return {
      DocInfo: '',
      userid: this.$route.query.userid,
      BusinessProcessing: [], // 业务处理
      activeNames: '1',
      MyManagement: [
        {
          MENU_DOC_ICON: require('../../assets/个人工作站/xiugaiziliao.png'),
          MENU_DOC_ICON_UNABLE: require('../../assets/个人工作站/xiugaiziliao-hui.png'),
          MENU_NAME: '修改资料',
          MENU_URL: '/personInfo'
        }, {
          MENU_DOC_ICON: require('../../assets/个人工作站/saoyisao.png'),
          MENU_DOC_ICON_UNABLE: require('../../assets/个人工作站/saoyisao-hui.png'),
          MENU_NAME: '扫一扫',
          MENU_URL: 'ANDROID:goScan'
        },
        {
          MENU_DOC_ICON: require('../../assets/个人工作站/tianjiahaoyouma.png'),
          MENU_DOC_ICON_UNABLE: require('../../assets/个人工作站/tianjiahaoyouma-hui.png'),
          MENU_NAME: '添加好友码',
          MENU_URL: '/myErCode'
        },
        {
          MENU_DOC_ICON: require('../../assets/个人工作站/xingchenglianxima.png'),
          MENU_DOC_ICON_UNABLE: require('../../assets/个人工作站/xingchenglianxima-hui.png'),
          MENU_NAME: '形成联系码',
          MENU_URL: '/doctorQr'
        },
        {
          MENU_DOC_ICON: require('../../assets/个人工作站/jigoujiandangma.png'),
          MENU_DOC_ICON_UNABLE: require('../../assets/个人工作站/jigoujiandangma-hui.png'),
          MENU_NAME: '团队/机构建档码',
          MENU_URL: '/SelectTeamOrOrgan'
        },
        {
          MENU_DOC_ICON: require('../../assets/个人工作站/wodedingdan.png'),
          MENU_DOC_ICON_UNABLE: require('../../assets/个人工作站/wodedingdan-hui.png'),
          MENU_NAME: '我的订单',
          MENU_URL: '/DoctorAllOrder'
        },
        {
          MENU_DOC_ICON: require('../../assets/个人工作站/wotigongdefuwu.png'),
          MENU_DOC_ICON_UNABLE: require('../../assets/个人工作站/wotigongdefuwu-hui.png'),
          MENU_NAME: '我提供的服务',
          MENU_URL: '/teamPriceList'
        },
        {
          MENU_DOC_ICON: require('../../assets/个人工作站/wodepaiban.png'),
          MENU_DOC_ICON_UNABLE: require('../../assets/个人工作站/wodepaiban-hui.png'),
          MENU_NAME: '我的排班',
          MENU_URL: '/ScheduleListTable'
        },
        {
          MENU_DOC_ICON: require('../../assets/个人工作站/wodehaoyou.png'),
          MENU_DOC_ICON_UNABLE: require('../../assets/个人工作站/wodehaoyou-hui.png'),
          MENU_NAME: '我的好友',
          MENU_URL: '/myFriends'
        },
        {
          MENU_DOC_ICON: require('../../assets/个人工作站/wodepengyouquan.png'),
          MENU_DOC_ICON_UNABLE: require('../../assets/个人工作站/wodepengyouquan-hui.png'),
          MENU_NAME: '我的朋友圈',
          MENU_URL: '/groupFriends'
        },
        {
          MENU_DOC_ICON: require('../../assets/个人工作站/wodezhaopin.png'),
          MENU_DOC_ICON_UNABLE: require('../../assets/个人工作站/wodezhaopin-hui.png'),
          MENU_NAME: '我的招聘',
          MENU_URL: '/zhao'
        },
        {
          MENU_DOC_ICON: require('../../assets/个人工作站/wodeqiuzhi.png'),
          MENU_DOC_ICON_UNABLE: require('../../assets/个人工作站/wodeqiuzhi-hui.png'),
          MENU_NAME: '我的求职',
          MENU_URL: '/qiu'
        },
        {
          MENU_DOC_ICON: require('../../assets/个人工作站/shimingrenzheng.png'),
          MENU_DOC_ICON_UNABLE: require('../../assets/个人工作站/shimingrenzheng-hui.png'),
          MENU_NAME: '实名认证',
          MENU_URL: '/CareerInformation'
        },
        {
          MENU_DOC_ICON: require('../../assets/个人工作站/yinsibaohu.png'),
          MENU_DOC_ICON_UNABLE: require('../../assets/个人工作站/yinsibaohu-hui.png'),
          MENU_NAME: '隐私保护',
          MENU_URL: '/privacySettings'
        },
        {
          MENU_DOC_ICON: require('../../assets/个人工作站/lianxikefu.png'),
          MENU_DOC_ICON_UNABLE: require('../../assets/个人工作站/lianxikefu-hui.png'),
          MENU_NAME: '联系客服',
          MENU_URL: '#'
        },
        {
          MENU_DOC_ICON: require('../../assets/个人工作站/tuichudenglu.png'),
          MENU_DOC_ICON_UNABLE: require('../../assets/个人工作站/tuichudenglu-hui.png'),
          MENU_NAME: '退出登录',
          MENU_URL: 'ANDROID:exit'
        }
      ],
      staff_status: ''
    }
  },
  mounted () {
    // 实名认证
    sessionStorage.removeItem('realNameData')

    this.getDocInfo()
    this.getHomeMenu()
  },
  methods: {
    // 点击我的菜单跳转
    clickMyUse (item) {
      let query = {
        userid: this.userid
      }
      if (item.MENU_URL == '#') {
        Toast('该功能正在开发中...')
      } else if (item.MENU_URL.split(':')[0] == 'ANDROID') {
        let fangFa = item.MENU_URL.split(':')[1]
        if (sessionStorage.getItem('sys') === 'ANDROID') {
          window.WebViewJavascriptBridge.callHandler(fangFa, {'param': ''}, function (responseData) {})
        } else if (fangFa == 'exit') {
          this.$dialog.alert({
            title: '确认退出登录吗？',
            showCancelButton: true, // 展示取消按钮
            backdropClose: true,
            confirmButtonColor: '#1da4f2'
          }).then(() => {
            // on close
            window.location.href = '../../../kfhl/frontlogin/lu'
          }).catch(() => {
          })
          return false
        } else {
          this.$toast('请在App上使用本功能')
        }
      } else if (item.MENU_URL == '/teamPriceList') {
        query.showNav = 1
        query.isAll = 1
      } else if (item.MENU_URL == '/CareerInformation') {
        if (Number(this.staff_status) === 0) {
          Toast('您已完成实名认证，请勿重复认证')
          return false
        } else if (Number(this.staff_status) === 2) {
          Toast('您提交的实名认证信息正在审核中')
          query.STAFF_ID = this.STAFF_ID
          return false
        } else if (Number(this.staff_status) === 3) {
          Toast('您提交的实名认证信息审核不通过，请重新提交')
          return false
        }
      }
      this.$router.push({path: item.MENU_URL,
        query: query})
    },
    // 点击业务处理菜单跳转
    clickUse (item) {
      window.location.href = item.MENU_URL
    },
    // 获取菜单模块
    getHomeMenu () {
      this.$http.getMenus({})
        .then(res => {
          console.log(res)
          this.BusinessProcessing = res.data
        })
        .catch(err => {
          console.log(err)
          this.$toast('您的网络有些拥挤，请稍后再试')
        })
    },
    // 点击二维码
    runCode () {
      this.$router.push({path: '/doctorQr', query: {userid: this.userid}})
    },
    getDocInfo () {
      this.$http.minidoctorDetail({doc_user_id: this.userid})
        .then(res => {
          console.log(res)
          if (res.data.status === 'success') {
            this.DocInfo = res.data.data
            this.staff_status = res.data.data.staff_status
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    // 返回
    back () {
      this.$router.history.go(-1)
    }
  }
}
</script>

<style scoped lang="scss">
.all{
  width: 100%;
  height: 100%;
  overflow: auto;
  background: #FAF9FE;
}
.all1{
  width: 100%;
  background: #1DA4F2;
}
.colorBlue{
  color: #1da4f2;
}
.fontSize11{
  font-size: 11px;
}
.fontSize13{
  font-size: 13px;
}
.fontSize15{
  font-size: 15px;
}
.fontSize17{
  font-size: 17px;
}
.fontWeightBlod{
  font-weight: bold;
}
header,
.biaoqian,
.hospital,
.divMenu ul li,
.title,
.label span,
.teamList ul li{
  display: flex;
  align-items: center;
}
header{
  width: 100%;
  height: 44px;
  font-family: "PingFang SC";
  color: white;
  position: sticky;
  top: 0;
  background: #1da5f2;
  z-index: 99;
}
.div{
  width: 33%;
  font-size: 15px;
  font-weight: bold;
  display: flex;
  align-items: center;
}
.div:nth-child(1) img{
  margin: 0 5px 0 15px;
}
.div:nth-child(1) img,
.imgMore{
  width: 7px;
  height: 13px;
}
.imgMore{
  margin-left: 5px;
}
.div:nth-child(2){
  justify-content: center;
}
.div:nth-child(3){
  justify-content: flex-end;
}
.div:nth-child(3) span{
  margin-right: 15px;
}
.boxInfo{
  margin: 0 auto;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  padding:  15px 15px 0 15px;
  box-sizing: border-box;
}
.DocInfoUL{
  display: flex;
}
.InfoLeft{
  width: 20%;
  display: flex;
  flex-direction: column;
  /*justify-content: center;*/
}
.InfoLeft span{
  display: flex;
  align-items: center;
  justify-content: center;
}
.InfoLeft img{
  margin-top: 10px;
}
.photo{
  width: 60px;
  height: 60px;
  border-radius: 50%;
  object-fit: cover;
}
.InfoRight{
  width: 65%;
  display: flex;
  flex-direction: column;
  color: #FFFFFF;
  margin-left: 8px;
  /*justify-content: space-around;*/
}
.DocInfoRight{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  color: #FFFFFF;
  font-size: 13px;
}
.DocInfoRight img{
  width: 40px;
  height: 40px;
  margin-bottom: 5px;
}
.DocInfoRight span{
  text-align: center;
}
.tagTuandui{
  font-size: 11px;
  min-height: 18px;
  padding: 0 5px;
  box-sizing: border-box;
  background: linear-gradient(90deg, #F9BD77, #FFED91);
  border-radius: 19px;
  border: none;
  color: #A8610B;
  margin-left: 10px;
}
.InfoRight p {
  min-height: 25px;
  /*margin-top: 10px;*/
}

.box p{
  min-height: 30px;
  color: white;
}

.biaoqian{
  min-width: 44px;
  height: 18px;
  border-radius: 15px;
  box-sizing: border-box;
  background: transparent;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  border: 1px solid #fff;
  font-size: 11px;
  margin-left: 8px;
  justify-content: center;
}

.hospital{
  font-size: 13px;
  font-family: PingFang SC;
  font-weight: 500;
  color: #FFFFFF;
}
.divMenu{
  width: 100%;
  display: flex;
  /*margin: 10px auto;*/
  background: rgba(255, 255, 255, 0.2);
  /*border-radius: 10px;*/
}
.divMenu:last-child{
  border-radius:  0 0 10px 10px ;
  margin-bottom: 10px;
}
.divMenu ul{
  width: 33%;
  padding: 10px 0;
  box-sizing: border-box;
}
.divMenu ul li:nth-child(1) {
  font-size: 17px;
  font-family: PingFang SC;
  font-weight: bold;
  color: #fff;
}

.divMenu ul li{
  width: 100%;
  height: 20px;
  justify-content: center;
  color: #fff;
  font-size: 13px;
}
.goodDivAll{
  background: white;
  padding: 10px 0;
  box-sizing: border-box;
  border-radius: 10px 10px 0 0;
}
.goodDiv{
  padding: 0 15px;
  box-sizing: border-box;
  margin-top: 8px;
  font-size: 15px;
  font-family: PingFang SC;
  font-weight: 500;
  line-height: 25px;
  display: flex;
  /*align-items: center;*/
}
.tuwenImg{
  width: 22px;
  height: 22px;
  margin-right: 3px;
}
.goodText{
  display: flex;
}
.goodText a{
  display: block;
}
.goodText a:nth-child(1){
  white-space: nowrap;
}
.label{
  justify-content: space-between;
}
.title{
  width: 100%;
  height: 44px;
  padding: 0 15px;
  box-sizing: border-box;
  background: #FFFFFF;
  margin-top: 5px;
}
.hengGang{
  display: block;
  width: 2px;
  border-radius: 1px;
  height: 15px;
  background: #1DA4F2;
  margin-right: 5px;
}

.overText{
  display: block;
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.title_all{
  display: flex;
  align-items: center;
}
.CommonFunctions{
  width: 100%;
  background: #FFFFFF;
  display: flex;
  flex-wrap: wrap;
  color: #333333;
  border: 1px solid #E5E5E5;
  //border-top: 1px solid #E5E5E5;
  //border-bottom: 1px solid #E5E5E5;
  img{
    width: 22px;
    height: 22px;
    margin-left: 20%;
    margin-right: 5px;
  }
  div {
    width: 50%;
    min-height: 60px;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    //border-bottom: 1px solid #E5E5E5;
    box-sizing: border-box;
    font-size: 15px;
    border-right: none;
    border-left: none;
    border-bottom: 1px solid #E5E5E5;
    margin-top: -1px;
    margin-bottom: -1px;
    &:nth-child(odd){
      border-right: 1px solid #E5E5E5;
    }
  }
}
/deep/ .van-collapse-item__content{
  padding: 0 0;
}
/deep/ .van-cell{
  font-size: 15px;
}
</style>
